<template>
  <div class="list">
    <slot></slot>
    <div class="empty" v-if="isEmpty">
      <div class="empty-box" :style="{backgroundImage:'url('+ emptyImg +')'}">
      </div>
      <div class="info-text">{{text}}</div>

    </div>

  </div>
</template>

<script>
export default {
  name: 'List',
  props:{
    isEmpty : {
      type : Boolean,
      default : false
    },
    emptyImg:{
      type:String,
      default: 'http://p30o8ry3e.bkt.clouddn.com/empty.png'
    },
    text:{
      type:String,
      default: '空空如也:('
    }
  },
  data(){
    return{

    }
  },
  methods:{

  }
}
</script>

<style lang="stylus">
@import 'assets/stylus/base'
.list
  .list-footer
    background: #fff
    position: relative
    color: $text-grey
    font-size: 14px
    text-align: center
    padding: 10px
    fine-border-two(tb, $border-light)
  .group
    margin-top: 10px
    .item-header
      background: #fff
      padding: 0 $spacing
      height: 44px
      fine-border(bottom, $border-light)
      display: flex
      align-items: center
      justify-content: space-between
      .left
        span
          font-size: 12px
          color: $text-light
.empty
  text-align: center;
  padding: 30px $spacing;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .empty-box
    margin-bottom: 10px;
    width: 100%;
    height: 120px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 100%;
  .info-text
    font-size: 16px;
    color: #c8c8c8;
</style>
